import React, { Component } from 'react';
import '../assets/css/more.css';
import MovieList from '../components/sonComponents/MovieList';
import Search from '../components/sonComponents/Search';

import server from '../api/server'

// 导入ant design
import { Spin, Icon } from 'antd';
import 'antd/dist/antd.css';
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;

class more extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            movieList: [],
            isLoading: true
        }
        this.getMovieList = this.getMovieList.bind(this);
    }

    getMovieList() {
        const methodName = this.props.match.params.url;
        server[methodName]('get',{start:0,count:21}).then(result => {
            this.setState(
                {
                    title: result.data.title,
                    movieList: result.data.subjects,
                    isLoading: false
                }
            )
        })
    }
    componentWillMount () {
        this.getMovieList();
    }
    render () {
        if (this.state.isLoading) {
            return (
                <div>
                   <Spin indicator={antIcon} />
               </div>
            )
        } else {
            return (
                <div>
                     <Search />
                     <div className='moreStyle'>
                         <MovieList title={this.state.title} movieList={this.state.movieList}/>
                     </div>
                </div>
            )
        }
    }
}

export default more;
